<template>
  <div style="display: flex; flex-direction: column; align-items: center;" id="Catalog">

    <table style="width: 60%; background-color: #e9e9e9; border-collapse: collapse;" class="table-container">
      <tr>
        <th>View Item Record</th>
      </tr>
      <tr v-for="viewItem in viewItemList" :key="viewItem.itemId">

        <td>用户&nbsp;{{ viewItem.username }}&nbsp;于&nbsp;{{ formatDate(viewItem.date) }}&nbsp;浏览了
          {{ viewItem.productId }}&nbsp;里的
          <a :href="`/detail/${viewItem.itemId}`">{{ viewItem.itemId }}</a>
          总计浏览次数为&nbsp;{{ viewItem.quantity }}
        </td>

        <td v-if="viewItem.quantity > 5">
          You really like this item!
        </td>
      </tr>
      <tr>
        <th>Complete Order Record</th>
      </tr>

      <tr v-for="confirmOrder in confirmOrderList" :key="confirmOrder.orderId">
        <td>用户&nbsp;{{ confirmOrder.username }}&nbsp;于&nbsp;{{ formatDate(confirmOrder.date) }}&nbsp;完成了编号为
          <a :href="`/page2/orderdetail?orderId=${confirmOrder.orderId}`">{{ confirmOrder.orderId }}</a>&nbsp;的订单
        </td>
      </tr>
      <tr>
        <th>Update Cart Record</th>
      </tr>

      <tr v-for="addToCart in addToCartList" :key="addToCart.itemId">
        <td>用户&nbsp;{{ addToCart.username }}&nbsp;于&nbsp;{{ formatDate(addToCart.date) }}&nbsp;更新了购物车，将
          {{ addToCart.quantity }}&nbsp;个<a :href="`/detail/${addToCart.itemId}`">{{ addToCart.itemId }}</a>&nbsp;加到购物车中
        </td>
      </tr>
    </table>

  </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onMounted } from 'vue';
import apiClient from '@/api/api';
const format = (date: Date, formatString: string) => {
  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
    timeZone: 'Asia/Shanghai' // 根据实际情况调整时区
  };

  return new Intl.DateTimeFormat('zh-CN', options).format(date).replace(/\//g, '/').replace(/:/g, ':');
};

var viewItemList = ref<any>([]);
var confirmOrderList = ref<any>([]);
var addToCartList = ref<any>([]);
const formatDate = (date: Date | string) => {
  const dateObj = typeof date === 'string' ? new Date(date) : date;
  return format(dateObj, 'yyyy/MM/dd HH:mm:ss');
};

onMounted(async () => {
  try {
    const response = await apiClient.get('/records');

    console.log(response.data.data);
    if (response.data.status === 0) {
      response.data.data.viewItem.forEach((item: any) => viewItemList.value.push(item));
      response.data.data.confirmOrder.forEach((order: any) => confirmOrderList.value.push(order));
      response.data.data.addToCart.forEach((cart: any) => addToCartList.value.push(cart));
      console.log(confirmOrderList.value);
    }
  } catch (error) {
    console.error('获取日志记录失败:', error);
  }
});
</script>

<style scoped>
#Catalog {
  /* margin-top: 5vh; */
  margin-bottom: 15vh;
}

h3 {
  text-align: left;
  font-size: 25px;
  font-weight: bold;
}

.table-container {
  width: 60%;
  background-color: #e9e9e9;
  border-collapse: collapse;
  border: 3px white;

}

.table-container th {
  border: 2px solid white;
  font-size: 25px;
  font-weight: 900;
  text-align: left;
}

.table-container td {
  border: 2px solid white;
  padding: 8px;
  text-align: left;
  font-size: 25px;
  min-width: 150px;
  /* 新增最小宽度 */
  white-space: nowrap;
  /* 防止内容换行 */
}
</style>